<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>成员管理</title>
  <script src="./lib/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="./lib/elementui-index.js"></script>
  <script src="./lib/axios.min.js"></script>
  <script src="./lib/token.js"></script>
</head>
<body>
<div id="app1" style="width: 100%">
  <template>
    <el-table
            :data="tableData"
            stripe
            style="width: 100%" >
      <el-table-column
              prop="eid"
              label="员工ID">
      </el-table-column>

      <el-table-column
              prop="ename"
              label="员工姓名">
      </el-table-column>

      <el-table-column
              prop="esex"
              label="性别">
      </el-table-column>

      <el-table-column
              prop="teamBean.tname"
              label="所属班别">
      </el-table-column>
      
      <el-table-column
              prop="teamBean.deptBean.dname"
              label="所属车间">
      </el-table-column>

      <el-table-column
              label="操作选项" width="300">
              <template slot-scope="scope">
                <el-popover
                placement="right"
                width="460"
                trigger="click">

                <el-table :data="table2">
                    <el-table-column width="80" prop="ename" label="员工姓名"></el-table-column>
                  <el-table-column width="80" prop="nativePlace" label="民族"></el-table-column>
                  <el-table-column width="160" prop="addr" label="家庭住址"></el-table-column>
                  <el-table-column width="140" prop="etel" label="联系方式"></el-table-column>
                </el-table>
                <el-button slot="reference" type="info" round @click="upOrders(scope.row)"  size="small">详情</el-button>
              </el-popover>

                <el-button type="primary" round @click="updemp(scope.row)"  size="small">修改</el-button>
                <el-button type="warning" round @click="upOr2ders(scope.row)"  size="small">删除</el-button>
            </template>   
      </el-table-column>
    </el-table>
  </template>
  <div class="block">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
  </div>
</div>

<script>
  new Vue({
    el: "#app1",
    data:{
      tableData:[],
      pageNum:1,
      pageSize:3,
      total:0,
      table2:[]
    },
    created(){
      this.findAllEmp()
    },
    methods:{

      handleSizeChange(size) {
        console.log(`每页 ${size} 条`);
        this.pageSize=size;
        this.findAllEmp();
      },
      handleCurrentChange(num) {
        console.log(`当前页: ${num}`);
        this.pageNum=num;
        this.findAllEmp();
      },
      findAllEmp(){
        axios.get("http://localhost:8001/dept/emp/findAllEmp",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize,
          }
        })
                .then(response=>{
                  console.log(response.data.data.list)
                  this.tableData=response.data.data.list;
                  this.total=response.data.data.total;
                  this.pageNum=response.data.data.pageNum;
                  this.pageSize=response.data.data.pageSize;
                })
      },
      upOrders(row){
        this.table2 = []
        console.log(row)
        this.table2.push(row)
        console.log(this.table2[0])
      },
      updemp(row){
        sessionStorage.setItem("empl",JSON.stringify(row))
        location.href = "updateEmpl.html"
      }
    }
  })

</script>

</body>
</html>
